<template>
  <n-modal v-model:show="show">
    <n-card class="h-screen overflow-hidden">
      <div class="flex flex-col h-screen overflow-hidden ">
        <div class="h-14  flex items-center justify-between px-3 border-b border-gray-300 dark:border-gray-700">
          <div class="flex w-3/4 space-x-3 items-center ">
            <n-tooltip trigger="hover">
              <template #trigger>
                <div class=" text-2xl font-bold truncate">
                  {{ post.title }}
                </div>
              </template>
              {{ post.title }}
            </n-tooltip>
            <n-tag>
              <TextIcon icon="mdi:category" :text="post.categoryName" tip="分类" :size="16"></TextIcon>
            </n-tag>
            <ArrayTag tip="文章标签" :tags="post.tags"></ArrayTag>

          </div>
          <div class="flex items-center space-x-3">
            <ThemeSwitch :size="25"></ThemeSwitch>
            <n-button secondary @click="doHide">
              <TextIcon tip="关闭" icon="mdi:close"></TextIcon>
            </n-button>
          </div>
        </div>
        <div class="flex-1 overflow-hidden">
          <n-scrollbar id="postPreviewModal">
            <div class="sticky top-0 h-0 z-50 ">
              <CatalogShowButton v-model:is-expand="catalogShow"></CatalogShowButton>
            </div>
            <div class="flex container max-w-screen-lg mx-auto">
              <div v-if="catalogShow"
                   class="px-1 sticky top-24 h-0">
                <PreviewCatalog :id="post.id.toString()"
                                :selectors="'#postPreviewModal > div.n-scrollbar-container'"></PreviewCatalog>
              </div>
              <div class="flex-1 w-0">
                <PreviewMarkdown :id="post.id.toString()" :content="post.content"></PreviewMarkdown>
              </div>
            </div>
          </n-scrollbar>
        </div>
      </div>
    </n-card>
  </n-modal>
</template>

<script setup lang="ts">
import {nextTick, ref} from "vue";
import TextIcon from "@/components/pc/icon/TextIcon.vue";
import PreviewMarkdown from "@/components/common/markdown/PreviewMarkdown.vue";
import CatalogShowButton from "@/components/pc/button/CatalogShowButton.vue";
import PreviewCatalog from "@/components/common/markdown/PreviewCatalog.vue";
import ArrayTag from "@/components/pc/tag/ArrayTag.vue";
import api from "@/api";
import ThemeSwitch from "@/components/pc/switch/ThemeSwitch.vue";

const show = ref(false)
const post = ref<IPost>({} as IPost)
const catalogShow = ref(false)


const doParamsShow = (params: any) => {
  post.value = JSON.parse(JSON.stringify(params.post))
  if (!post.value.content) {
    getPost()
  }
  show.value = true
  catalogShow.value = !catalogShow.value
  nextTick(() => {
    catalogShow.value = !catalogShow.value
  })
}

const getPost = () => {
  window.$loadingBar.start()
  api.post.id({
    id: post.value.id,
  }).then(res => {
    if (res.data.code === 0) {
      post.value = res.data.data as IPost
      post.value.tags = res.data.data.tags ? JSON.parse(res.data.data.tags) : []
    }
  }).finally(() => {
    window.$loadingBar.finish()
  })
}
const doHide = () => {
  show.value = false
}
defineExpose({
  doHide,
  doParamsShow
})
</script>

<style scoped>
:deep(.n-card__content:first-child) {
  padding: 0;
}
</style>